import React, { Component } from 'react'

const Abc = () => {
  return (
    <div>abc</div>
  )
}

export default class RenderData extends Component {
  state = {
    str: 'hello',
    num: 1,
    bool: true,
    obj: null,
    arr: ['a', 'b'],
    html: '<b>hello</b>'
  }

  render() {
    return (
      <>
        <div>
          {this.state.str}
        </div>
        <div>
          {this.state.num}
        </div>
        <div>
          {this.state.bool}
        </div>
        <div>
          {this.state.obj}
        </div>
        <div>
          {
            this.state.bool && <Abc></Abc>
          }
        </div>
        <div>
          {
            this.state.arr
          }
        </div>
        <div>
          {
            this.state.arr.filter(v => v === 'a')
          }
        </div>
        <div dangerouslySetInnerHTML={{__html: this.state.html}}></div>
        <div>
          <label htmlFor=""></label>
        </div>
      </>
    )
  }
}
